import { addInfo, delInfo, exportVariableExcel, getPageList, importVariableExcel, modInfo } from "@/api/modules/iot/variable";
import { setSensor } from "@/api/modules/model/sensor";
import DialogBox from "@/components/DialogBox";
import { JsonSchemaEmitParam } from "@/components/JsonSchemaForm/interface/jsonschema";
import JsonSchemaEditor from "@/components/JsonSchemaForm/JsonSchemaForm.vue";
import { AuthBtns, SchemaNodeKey, SchemaNodeType, deptAnonymous } from "@/utils/constants";
import mittBus from "@/utils/mittBus";
import { assJsonpathData, exportExcel, showTips } from "@/utils/util";
import jsonpath from "jsonpath";
import { getCurrentInstance, defineComponent, ComponentInternalInstance } from "vue";
import { useRoute } from "vue-router";
import ProTable from "@/components/ProTable/index.vue";
import { TYPE_NAME } from "@/components/JsonSchemaForm/type/type";
import {
	parseDeviceSchemaFromSensor,
	parseProfileFromDeviceSensorParam,
	parseProfileFromRealtimeSensorValue,
	parseSchemaFromDevice,
	parseSchemaFromGatewaySensor
} from "../../../../utils/schema";
import SensorHistory from "./SensorHistory";
import { GatewayType } from "@/api/interface/iot";
import { ColumnProps } from "@/components/ProTable/interface";
import "./index.scss";
import { DataPreview } from "@/enums/dataPreview";
import { accessType, funcType } from "@/enums/dictEnum";
import { PublicStore } from "@/stores/modules/public";
import UploadFile from "@/components/Upload/UploadFile.vue";
import SensorForm from "../components/SensorForm";
/**
 * 设备参数信息,scheme中的config下面子设备参数信息（排除sensor节点）
 * 相关参数：设备接入端口、地址、采集周期、上报周期
 */
export default defineComponent({
	props: {
		type: {
			type: String,
			default() {
				return GatewayType.Device;
			}
		},
		columns: {
			type: Array,
			default() {
				return [
					{ prop: "operation", label: "操作", type: "", width: 100 },
					{ prop: "key", label: "变量标识", align: "left" },
					{ prop: "type", label: "数据类型", width: 110 },
					{ prop: "label", label: "变量名称", align: "left" },
					{ prop: "data", label: "变量值" },
					{ prop: "config", label: "变量配置" },
					{ prop: "more", label: "更多", width: 240 }
				];
			}
		}
	},
	emits: [],
	setup(props) {
		const { proxy } = getCurrentInstance() as ComponentInternalInstance;
		const route = useRoute();

		//设备参数配置模型
		const schema = inject<any>(SchemaNodeKey.schema);
		const gatewaySchema = inject<any>(SchemaNodeKey.gatewaySchema);
		const gatewayProfile = inject<any>(SchemaNodeKey.gatewayProfile);
		const configSchema = parseSchemaFromGatewaySensor(gatewaySchema.value);
		const profile = inject<any>(SchemaNodeKey.profile);
		const disabledMod = inject<any>(AuthBtns.disabledMod);

		const state = reactive({
			sn: (route.query.sn || route.query.id) as string
		});
		//变量模型profile：单位、名称、描述等
		let sensorRealtimeValue = ref<any>({});
		let sensorProfile = ref<any>({});
		const refreshDeviceDetail = () => {
			if (route.query.id) {
				mittBus.emit("refreshProductDetail");
			} else if (route.query.type) {
				mittBus.emit("refreshGatewayDetail");
			} else {
				mittBus.emit("refreshDeviceDetail");
			}
		};
		//缓存sensor数据
		const schemaTree = reactive({
			root: {
				type: "object",
				title: schema.value?.properties?.config?.properties?.sensor?.title || "设备模型",
				properties: {},
				required: []
			}
		});
		const schemaTreeCopy = ref({});
		const sensorHistoryEl = ref();
		onBeforeMount(() => {
			initSensor();
			//监听新增节点
			mittBus.on("addExtType", () => {
				// saveSchema();
			});
			//监听删除节点
			mittBus.on("delExtType", async (e: any) => {
				let row = sensorFormDialog.row;
				let key = row.keyPath == row.key ? row.key : row.keyPath;
				let res = await modInfo({
					id: row.id,
					key: key,
					confDel: `${key}.${e}`
				});
				let ok = showTips(res.code, "删除配置", res.message);
				if (ok) {
					refreshDeviceDetail();
				}
			});
			mittBus.on("clickRefreshDeviceDetail", async () => {
				initSensor();
				proTable.value.getTableList();
			});
		});
		onBeforeUnmount(() => {
			mittBus.off("addExtType");
			mittBus.off("delExtType");
			mittBus.off("clickRefreshDeviceDetail");
		});
		const clickSensorParam = (row: any) => {
			sensorFormDialog.row = row;
			let path = row.keyPath;
			const sensorTemplate = parseSchemaFromDevice(schema.value)?.sensor?.properties || {};
			let pathSensor = jsonpath.query(sensorTemplate, assJsonpathData(path.replaceAll(".", ".properties.")));
			let obj;
			if (pathSensor.length && pathSensor[0].properties && JSON.stringify(pathSensor[0].properties) != "{}") {
				obj = pathSensor[0];
				sensorFormDialog.detail = jsonpath.query(sensorProfile.value, assJsonpathData(path)).length
					? jsonpath.query(sensorProfile.value, assJsonpathData(path))[0]
					: {};
			} else {
				obj = configSchema;
				sensorFormDialog.detail = gatewayProfile.value.profile?.config?.subdevice?.sensor || {};
			}
			sensorFormDialog.schema.root = {
				...obj,
				title: path,
				type: SchemaNodeType.object
			};

			sensorFormDialog.visible = true;
		};
		watch(
			() => schema.value,
			() => {
				initSensor();
			}
		);
		const isSensor = ref(false);
		//初始化上报数据，没有模型就自动增加
		const initSensor = async () => {
			//变量模型profile：单位、名称、描述等
			sensorRealtimeValue.value = parseProfileFromRealtimeSensorValue(profile.value);
			sensorProfile.value = parseProfileFromDeviceSensorParam(profile.value);
			const sensorSchema = parseDeviceSchemaFromSensor(schema.value);
			isSensor.value = JSON.stringify(sensorSchema) == "{}";
			schemaTree.root.properties = sensorSchema;
			const applySchema = (value: any, path: string) => {
				//当前有相同Schema的key不执行
				// if (!jsonpath.query(sensorSchema, assJsonpathData(path)).length) {
				let obj = jsonpath.query(sensorSchema, assJsonpathData(path)).length
					? jsonpath.query(sensorSchema, assJsonpathData(path))[0]
					: {};
				if (obj && JSON.stringify(obj) != "{}" && obj.type) {
					obj.type = obj.type || typeof value;
				}
				if (typeof value == "object" && obj && JSON.stringify(obj) != "{}" && obj.type && obj.type == "object") {
					jsonpath.value(sensorSchema, assJsonpathData(path), { ...obj });
					for (let ck in value) {
						let cPath = path ? path + ".properties." + ck + "" : ck;
						jsonpath.value(sensorSchema, assJsonpathData(cPath));
						applySchema(value[ck], cPath);
					}
				} else {
					jsonpath.value(sensorSchema, assJsonpathData(path), { ...obj });
				}
				// }
			};
			for (let key in sensorRealtimeValue.value) {
				applySchema(sensorRealtimeValue.value[key], key);
			}
			schemaTreeCopy.value = JSON.parse(JSON.stringify(schemaTree));
		};

		//变量配置弹窗
		const sensorFormDialog = reactive<any>({
			visible: false,
			schema: { root: {} },
			detail: {},
			row: {}
		});
		const setProfileDialog = reactive({ visible: false, data: [] });
		const saveProfile = async (local = false, entire = false) => {
			let data = {};
			setProfileDialog.data.map((item, index) => {
				if (item.data[item.key] || item.data[item.key] == 0) {
					if (item.type == "object") {
						setProfileDialog.data[index].data[item.key] = JSON.parse(setProfileDialog.data[index].data[item.key]);
					} else if (item.type == "number") {
						setProfileDialog.data[index].data[item.key] = Number(setProfileDialog.data[index].data[item.key]);
					}
					data = { ...data, ...setProfileDialog.data[index].data };
				}
			});
			setSensor({ idSn: state.sn, data: data, local, entire }).then(res => {
				let ok = showTips(res.code, "参数配置", res.message);
				if (ok) {
					setProfileDialog.visible = false;
					refreshDeviceDetail();
				}
			});
		};
		//添加变量配置
		const addSensor = async () => {
			sensorFormDialog.row.config = sensorFormDialog.detail;
			await modRow(sensorFormDialog.row);
			sensorFormDialog.visible = false;
			refreshDeviceDetail();
		};

		const initParam = reactive({
			pageIndex: 0,
			pageSize: 10,
			sn: route.query.sn,
			productModel: route.query.productModel
		});
		const proTable = ref<any>();
		const columns = reactive<ColumnProps[]>(props.columns);
		//递归子集
		const getChildren = (list: any, key: any, data: any, config: any, id: any, keyPath: any) => {
			if (!list.properties || JSON.stringify(list.properties) == "{}") return [];
			let arr: any[] = [];
			Object.keys(list.properties).map((item: any) => {
				list.properties[item].type = list.properties[item].type
					? list.properties[item].type
					: list.properties[item].properties
					? "object"
					: "string";
				let obj: any = {
					type: list.properties[item].type,
					key: item,
					label: list.properties[item].title,
					data: data && JSON.stringify(data[item]) ? data : { [item]: null },
					config: config[item] || { [item]: {} },
					keyPath: `${keyPath}.${item}`,
					id: id,
					schema: list.properties[item]
				};
				if (list.properties[item].type == "object") {
					obj.children = getChildren(
						list.properties[item],
						item,
						data && data[item] ? data[item] : { [item]: null },
						config[item] || { [item]: {} },
						id,
						obj.keyPath
					);
				}
				arr.push(obj);
			});
			return arr;
		};
		const dataCallback = (data: any) => {
			data.records = data.records.map((item: any) => {
				item.keyPath = item.key;
				item.type = item.type ? item.type : item?.properties ? "object" : "string";
				if (item.type == "object") {
					item.children = getChildren(
						item.schema[item.key],
						item.key,
						item.data && JSON.stringify(item.data[item.key]) ? item.data[item.key] : { [item.key]: null },
						item.config[item.key] || { [item.key]: {} },
						item.id,
						item.key
					);
					// item.data = null;
					// item.config = null;
				} else {
					item.data = {
						[item.key]:
							item.data && (item.data[item.key] || item.data[item.key] == 0)
								? typeof item.data[item.key] == "string"
									? item.data[item.key]
									: JSON.stringify(item.data[item.key])
								: null
					};
					item.config = item.config[item.key] || { [item.key]: {} };
				}
				return item;
			});
			return {
				datalist: data.records,
				total: data.total || 0,
				pageIndex: data.current,
				pageSize: data.size
			};
		};
		const removeNode = async (row: any) => {
			let res = await delInfo({ id: row.id, key: row.key == row.keyPath ? null : row.keyPath });
			let ok = showTips(res.code, "删除字段标识", res.message);
			if (ok) {
				proTable.value.getTableList();
			}
		};
		const addChildNode = reactive<any>({
			visible: false,
			formData: { key: "", type: "string", label: "", value: "" },
			row: {}
		});
		const addChildNodeForm = ref();
		//新增字段标识
		const addChild = () => {
			addChildNodeForm.value.validate(async (valid: any) => {
				if (valid) {
					addChildNode.visible = false;
					let obj: any;
					if (addChildNode.row.id) {
						obj = {
							id: addChildNode.row.id,
							label: addChildNode.formData.label,
							key: `${addChildNode.row.keyPath}.${addChildNode.formData.key}`,
							type: addChildNode.formData.type,
							data: addChildNode.formData.value,
							sn: route.query.sn,
							productModel: route.query.productModel
						};
					} else {
						obj = {
							label: addChildNode.formData.label,
							key: addChildNode.formData.key,
							type: addChildNode.formData.type,
							data: addChildNode.formData.value,
							sn: route.query.sn,
							productModel: route.query.productModel
						};
					}
					if (addChildNode.formData.type == "object") {
						obj.data = {};
					}
					let res = await addInfo(obj);
					let ok = showTips(res.code, "新增", res.message);
					if (ok) {
						proTable.value.getTableList();
					}
				}
			});
		};
		const modRow = async (row: any) => {
			let data = row.data ? row.data[row.key] : null;
			if (row.type == "number") {
				data = data || data == "0" ? Number(data) : null;
			} else if (row.type == "string") {
				data = data + "";
			}

			let res = await modInfo({
				id: row.id,
				key: row.keyPath == row.key ? row.key : row.keyPath,
				label: row.label,
				type: row.type,
				config: row.config,
				data: data
			});
			let ok = showTips(res.code, "修改", res.message);
			if (ok) {
				row.showSave = false;
			}
		};
		const changeSave = (row: any) => {
			row.showSave = true;
		};
		const clickValueIcon = (row: any) => {
			let param: JsonSchemaEmitParam = {
				dataPath: row.keyPath,
				dataType: row.dataType,
				dataKey: row.key,
				dataValue: row.data,
				schemaInfo: row.schema,
				operate: row.operate
			};
			sensorHistoryEl.value.loadData(param, state.sn);
		};
		const publicStore = PublicStore();
		const uploadFileEl = ref();
		const init = async () => {
			let { result } = await getPageList({ sn: route.query.sn, pageIndex: 1, pageSize: 999 });
			setProfileDialog.data = result.records
				.filter(item => item.config[item.key]?.param?.access == 0)
				.map((item: any) => {
					if (item.type == "object") {
						item.data[item.key] = JSON.stringify(item.data[item.key]);
					}
					return item;
				});
		};

		return () => {
			return (
				<div class="block-basic p-8 SensorFormList">
					<UploadFile
						style="display: none;"
						ref={uploadFileEl}
						api={importVariableExcel}
						headers={{ Authentication: publicStore.token }}
						onSubmitFileInfo={() => {
							proTable.value.getTableList();
						}}
					/>
					<SensorHistory ref={sensorHistoryEl} />
					<DialogBox
						title="变量配置"
						v-model:visible={sensorFormDialog.visible}
						footerLabel={["关闭", "保存"]}
						width="980px"
						onConfirm={() => addSensor()}
					>
						<JsonSchemaEditor
							class="w-full"
							value={sensorFormDialog.schema}
							lang="zh_CN"
							extType
							jsonValue={sensorFormDialog.detail}
							disabled={disabledMod.value}
						/>
					</DialogBox>
					<DialogBox
						title="数据下发"
						v-model:visible={setProfileDialog.visible}
						footerLabel={["关闭", "下发"]}
						width="980px"
						onConfirm={() => saveProfile()}
					>
						<SensorForm detail={setProfileDialog.data} />
						{/* <JsonSchemaEditor class="w-full" value={schemaTreeCopy.value} lang="zh_CN" jsonValue={sensorRealtimeValue.value} /> */}
					</DialogBox>
					<div class="flex mb-4 justify-between">
						<div class="flex">
							<el-button
								type="primary"
								plain
								onClick={() => {
									if (route.query.protocol) {
										clickValueIcon({
											dataType: DataPreview.dict.type,
											dataKey: "",
											dataValue: "",
											operate: "add"
										});
									} else {
										addChildNode.visible = true;
										addChildNode.row = {};
									}
								}}
								disabled={disabledMod.value}
							>
								新增变量
							</el-button>
							<el-button
								type="primary"
								plain
								onClick={() => {
									uploadFileEl.value.selectingFile();
								}}
							>
								导入变量
							</el-button>
							<el-button
								type="primary"
								plain
								onClick={async () => {
									let res: any = await exportVariableExcel({
										devSn: route.query.sn,
										keyNot: "timestamp",
										deptIdNot: deptAnonymous
									});
									exportExcel(res.data, res.filename);
								}}
								disabled={disabledMod.value}
							>
								导出变量
							</el-button>
							{route.query.sn && (
								<el-button
									type="primary"
									plain
									onClick={() => {
										setProfileDialog.visible = true;
										init();
									}}
									disabled={disabledMod.value}
								>
									{proxy?.$t("sensorformlist.btn.data")}
								</el-button>
							)}
						</div>
						{/* <el-button class="ml-auto" link type="primary" onClick={() => (dialogVisible.value = true)}>
							预览JSON
						</el-button> */}
					</div>

					<ProTable
						height={"calc(100vh - 525px)"}
						initParam={initParam}
						ref={proTable}
						showHeader={false}
						columns={columns}
						requestApi={getPageList}
						dataCallback={dataCallback}
						selectId="keyPath"
						border
						indent={20}
					>
						{{
							operation: (scope: any) => {
								return (
									<div class="ant-col-setting">
										{scope.row.showSave ? (
											<el-button
												link
												class="iconfont iconcirclecheckfull"
												style="color: green"
												onClick={() => {
													modRow(scope.row);
												}}
											>
												保存
											</el-button>
										) : (
											<div>
												{scope.row.type == "object" ? (
													<el-button
														link
														class="plus-icon iconfont iconbx-plus"
														onClick={() => {
															addChildNode.visible = true;
															addChildNode.row = scope.row;
														}}
													/>
												) : (
													<div class="empty-btn"></div>
												)}
												<el-popconfirm title="是否删除该数据？" onConfirm={() => removeNode(scope.row)}>
													{{
														reference: () => {
															return <el-button link class="close-icon ant-btn-icon-only iconfont iconbx-minus" />;
														}
													}}
												</el-popconfirm>
											</div>
										)}
									</div>
								);
							},
							type: (scope: any) => {
								return (
									<el-select
										v-model={scope.row.type}
										onChange={() => {
											changeSave(scope.row);
										}}
										placeholder="请选择"
									>
										{Object.keys(TYPE_NAME).map((name: any, index: any) => {
											return (
												<el-option key={index} value={name} label={TYPE_NAME[name]}>
													{TYPE_NAME[name]}
												</el-option>
											);
										})}
									</el-select>
								);
							},
							label: (scope: any) => {
								return (
									<el-input
										v-model={scope.row.label}
										clearable
										onInput={() => {
											changeSave(scope.row);
										}}
										placeholder="请输入"
									></el-input>
								);
							},
							data: (scope: any) => {
								if (scope.row.data && typeof scope.row.data[scope.row.key] == "boolean") {
									scope.row.data[scope.row.key] = JSON.stringify(scope.row.data[scope.row.key]);
								}
								return (
									<div>
										{scope.row.type == "object" ? null : (
											<el-link
												type="primary"
												onClick={() => {
													scope.row.dataType = DataPreview.historyChart.type;
													clickValueIcon(scope.row);
												}}
											>
												{scope.row.data ? scope.row.data[scope.row.key] : "--"}
											</el-link>
										)}
									</div>
								);
							},
							config: (scope: any) => {
								return (
									<div>
										{scope.row.type == "object" ? null : (
											<el-link
												type="primary"
												onClick={() => {
													clickSensorParam(scope.row);
												}}
											>
												{JSON.stringify(scope.row.config) == "{}" ? "-" : JSON.stringify(scope.row.config)}
											</el-link>
										)}
									</div>
								);
							},
							// modbus协议列数据处理
							paramRead: (scope: any) => {
								return <div>{funcType.find(item => item.value == scope.row.config?.param?.read)?.label || "--"} </div>;
							},
							paramOffset: (scope: any) => {
								return <div>{scope.row.config?.param?.offset || "--"} </div>;
							},
							configType: (scope: any) => {
								return <div>{scope.row.config?.type || "--"} </div>;
							},
							paramAccess: (scope: any) => {
								return <div>{accessType.find(item => item.value == scope.row.config?.param?.access)?.label || "--"} </div>;
							},
							paramTags: (scope: any) => {
								return <div>{scope.row?.param?.tags?.toString() || "--"} </div>;
							},
							more: (scope: any) => {
								return (
									<div class="flex">
										{/* 告警 */}
										<el-tooltip popper-class="jsonform-tooltip" showAfter={1000} content={DataPreview.configAlarm.tooltip}>
											<el-link
												type="primary"
												class={`iconfont ${DataPreview.configAlarm.icon}`}
												onClick={() => {
													scope.row.dataType = DataPreview.configAlarm.type;
													clickValueIcon(scope.row);
												}}
											>
												{DataPreview.configAlarm.label}
											</el-link>
										</el-tooltip>
										{/* <!-- 位置信息 --> */}
										{scope.row.type == DataPreview.location.type ? (
											<el-tooltip popper-class="jsonform-tooltip" showAfter={1000} content={DataPreview.location.tooltip}>
												<el-link
													type="primary"
													class={`iconfont ${DataPreview.location.icon}`}
													onClick={() => {
														scope.row.dataType = DataPreview.location.type;
														clickValueIcon(scope.row);
													}}
												>
													{DataPreview.location.label}
												</el-link>
											</el-tooltip>
										) : null}
										{/* <!-- 视频信息 --> */}
										{scope.row.type == DataPreview.video.type ? (
											<el-tooltip popper-class="jsonform-tooltip" showAfter={1000} content={DataPreview.video.tooltip}>
												<el-link
													type="primary"
													class={`iconfont ${DataPreview.video.icon}`}
													onClick={() => {
														scope.row.dataType = DataPreview.video.type;
														clickValueIcon(scope.row);
													}}
												>
													{DataPreview.video.label}
												</el-link>
											</el-tooltip>
										) : null}
										{/* <!-- 网页信息 --> */}
										{scope.row.type == DataPreview.web.type ? (
											<el-tooltip popper-class="jsonform-tooltip" showAfter={1000} content={DataPreview.web.tooltip}>
												<el-link
													type="primary"
													class={`iconfont ${DataPreview.web.icon}`}
													onClick={() => {
														scope.row.dataType = DataPreview.web.type;
														clickValueIcon(scope.row);
													}}
												>
													{DataPreview.web.label}
												</el-link>
											</el-tooltip>
										) : null}
										{/* <!-- 历史图片 --> */}
										{scope.row.type == DataPreview.img.type ? (
											<el-tooltip popper-class="jsonform-tooltip" showAfter={1000} content={DataPreview.img.tooltip}>
												<el-link
													type="primary"
													class={`iconfont ${DataPreview.img.icon}`}
													onClick={() => {
														scope.row.dataType = DataPreview.img.type;
														clickValueIcon(scope.row);
													}}
												>
													{DataPreview.img.label}
												</el-link>
											</el-tooltip>
										) : null}
										{/* <!-- 文件 --> */}
										{scope.row.type == DataPreview.file.type ? (
											<el-tooltip popper-class="jsonform-tooltip" showAfter={1000} content={DataPreview.file.tooltip}>
												<el-link
													type="primary"
													class={`iconfont ${DataPreview.file.icon}`}
													onClick={() => {
														scope.row.dataType = DataPreview.file.type;
														clickValueIcon(scope.row);
													}}
												>
													{DataPreview.file.label}
												</el-link>
											</el-tooltip>
										) : null}
										{/* <!-- 列表、图表信息 --> */}
										{scope.row.type != "object" ? (
											<el-tooltip showAfter={1000} content={DataPreview.historyChart.tooltip}>
												<el-link
													type="primary"
													class={`iconfont ${DataPreview.historyChart.icon}`}
													onClick={() => {
														scope.row.dataType = DataPreview.historyChart.type;
														clickValueIcon(scope.row);
													}}
												>
													{DataPreview.historyChart.label}
												</el-link>
											</el-tooltip>
										) : null}
										{/* <!-- 字典配置 --> */}
										{scope.row.key == scope.row.keyPath ? (
											<el-tooltip popper-class="jsonform-tooltip" showAfter={1000} content={DataPreview.dict.tooltip}>
												<el-link
													type="primary"
													class={`iconfont ${DataPreview.dict.icon}`}
													onClick={() => {
														scope.row.dataType = DataPreview.dict.type;
														clickValueIcon(scope.row);
													}}
												>
													{DataPreview.dict.label}
												</el-link>
											</el-tooltip>
										) : null}
									</div>
								);
							}
						}}
					</ProTable>
					{/* <JsonSchemaEditor
						isSensor
						class="w-full"
						value={schemaTree}
						lang="zh_CN"
						custom
						jsonParam={sensorProfile.value}
						jsonValue={sensorRealtimeValue.value}
						disabled={disabledMod.value}
					/> */}

					<DialogBox
						title="新增字段标识"
						visible={addChildNode.visible}
						footerLabel={["关闭", "保存"]}
						width="680px"
						onConfirm={() => addChild()}
						onClose={() => (addChildNode.visible = false)}
					>
						<el-form
							model={addChildNode.formData}
							ref={addChildNodeForm}
							rules={{
								key: [{ required: true, message: "请输入字段标识", trigger: "change" }]
							}}
							label-width="100"
						>
							<el-form-item label="变量名称" prop="label">
								<el-input v-model={addChildNode.formData.label}></el-input>
							</el-form-item>
							<el-form-item label="字段标识" prop="key">
								<el-input v-model={addChildNode.formData.key}></el-input>
							</el-form-item>
							<el-form-item label="数据类型" prop="type">
								<el-select v-model={addChildNode.formData.type}>
									{Object.keys(TYPE_NAME).map((name: any, index: any) => {
										return (
											<el-option key={index} value={name} label={TYPE_NAME[name]}>
												{TYPE_NAME[name]}
											</el-option>
										);
									})}
								</el-select>
							</el-form-item>
							<el-form-item label="变量值" prop="value">
								<el-input v-model={addChildNode.formData.value} disabled={addChildNode.formData.type == "object"}></el-input>
							</el-form-item>
						</el-form>
					</DialogBox>
				</div>
			);
		};
	}
});
